<template>
    <div class="wrapper">
        <div class="inner" v-show="isShow" v-cloak>
            <div class="list" v-if="totalElements>0">
                <div class="list-item" v-for="(item,index) in list" :key="index">
                    <div class="item-title">
                        <span class="extractCount">{{type=='1'?item.extractCount:item.count}}RB</span>
                        <span class="extractStateValue">{{type=='1'?item.extractStateValue:item.stateValue}}</span>
                        <mt-button class="extractBtn" type="primary" size="small" @click.native="type=='1'?copyCode(item.txNumber):copyCode(item.transactionHash)">复制Txid</mt-button>
                    </div>
                    <div class="item-address">
                        <span>地址：</span><span>{{type=='1'?item.extractAddress:item.forAddress}}</span>
                    </div>   
                    <div class="item-txNumber">
                        <span>Txid：</span><span>{{type=='1'?item.txNumber:item.transactionHash}}</span>
                    </div>  
                    <div class="item-time">
                        <span>时间：</span><span>{{(type=='1'?item.extractTime:item.topupTime) | filterTime}}</span>
                    </div> 
                </div>
                <div class="more" @click="loadmore" v-show="!lastPage">查看更多</div>
            </div>
            <PictureTips srcType="nolist" text="暂无数据" v-else></PictureTips>
        </div>
    </div>
</template>

<script>
import Clipboard from 'clipboard';
import { Toast } from 'mint-ui';
import { GetCashList, GetRechargeList } from '@/api/api'
import PictureTips from "@/components/PictureTips/index.vue"
import { parseTime } from '@/utils/index'
export default {
    data: function () {
        return {
            isShow:false,
            pageSize:20,
            currentPage:1,
            lastPage:false,
            totalElements:0,
            list:[],
        }
    },
    props:{
        type:{
            type: String,
            default:'1'
        }
    },
    components:{
        PictureTips
    },
    mounted(){
        if( this.type == '1' ){
            this.getCash();
        }else{
            this.getRecharge();
        }
    },
    filters:{
        filterTime:function(val){
            return parseTime(val)
        }
    },
    methods: {
        copyCode(item){
            var clipboard = new Clipboard('.extractBtn', {
                text: function() {
                    return item;
                }
            });
            clipboard.on('success', e => {
                console.log('复制文本为：'+item);
                Toast({
                    message: '复制成功',
                    iconClass: 'icon iconfont icon-ic_check'
                });
                // 释放内存
                clipboard.destroy()
            })
            clipboard.on('error', e => {
                // 不支持复制
                Toast({
                    message: '不支持自动复制',
                    iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                });
                // 释放内存
                clipboard.destroy()
            })
        },
        getCash(){
            GetCashList({
                pageSize:this.pageSize,
                currentPages:this.currentPage
            }).then(res => {
                if( res.code == 200 ){
                    this.list = this.list.concat(res.data.dataList);
                    this.currentPage = res.data.currentPages;
                    this.lastPage = res.data.lastPage;
                    this.totalElements = res.data.totalElements

                    this.$nextTick(() => {
                        this.isShow = true;
                    })
                }else{
                    
                }
            })
        },
        getRecharge(){
            GetRechargeList({
                page:this.pageSize,
                size:this.currentPage
            }).then(res => {
                if( res.code == 200 ){
                    this.list = this.list.concat(res.data.dataList);
                    this.currentPage = res.data.currentPages;
                    this.lastPage = res.data.lastPage;
                    this.totalElements = res.data.totalElements

                    this.$nextTick(() => {
                        this.isShow = true;
                    })
                }else{
                    
                }
            })
        },
        loadmore(){
            this.currentPage++;
            if( this.type == '1' ){
                this.getCash();
            }else{
                this.getRecharge();
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    padding-top:100px;
    height:100%;
    overflow-x: hidden;
    overflow-y: scroll;
    /*解决ios上滑动不流畅*/
    -webkit-overflow-scrolling: touch;
    .inner{
        padding-top:20px;
        .list{
            .list-item{
                color:#666;
                border-bottom:1px solid #eeeeee;
                &>div{
                    width:100%;
                    word-break:break-all;
                    height: 40px;
                    line-height:20px;
                    margin:5px 0;
                    position:relative;
                    span{
                        color:#666;
                        display:inline-block;
                        position:absolute;
                        top:0;
                        &:first-child{
                            color:#bfbfbf;
                            left:0;
                            width:50px;
                        }
                        &:last-child{
                            right:0;
                            padding-left:50px;
                        }
                    }
                    &.item-title{
                        height: 30px;
                        line-height:30px;
                        position:relative;
                        
                        span{
                            &.extractCount{
                                color:#666666;
                                width:auto;
                            }
                            &.extractStateValue{
                                right: 100px;
                            }
                        }
                        .extractBtn{
                            position:absolute;
                            right: 0;
                            width: 75px;
                            height: 30px;
                            line-height:30px;
                            padding: 0;
                            font-size: 12px;
                        }
                        
                    }
                    &.item-time{
                        height:25px;
                        span{
                            position: inherit;
                            &:last-child{
                                padding-left:0px;
                            } 
                        }
                    }
                }
            }
            .more{
                text-align:center;
                margin-top:15px;
                margin-bottom:15px;
                font-size:12px;
                color:#bfbfbf;
            }
        }
    }
}
</style>
